<template>

  <div v-if="column !== 1" class="goodsWrap">
    <div class="goodsItem" :style="{ width }" v-for="(item,index) in goodsList" :key="index" @click="goDetial(item)">
         <img :src="item.goods_image" :style="{height:imgHeight}">
         <view class="text">
            {{item.goods_name}}
         </view>
         <view class="price">
           ￥{{item.goods_price_max}}
         </view>
    </div>
  </div>
<div 
    v-else
    class="singleGoodsItem">
     <view class="goodsItem" v-for="(item,index) in goodsList" :key="index" @click="goDetial(item)">
        <img :src="item.goods_image">
        <view class="content">
            <view class="title">
                 {{item.goods_name}}
            </view>
            <view class="comment">
                {{item.selling_point}}
            </view>
            <view class="sell">
              已经售出{{item.goods_sales}}
            </view>
              <view class="price">
           ￥{{item.goods_price_max}}
         </view>
        </view>
     </view>
  </div>
</template>

<script>
    export default {
      props:['goodsItem','column'],
       data() {
            return {
                goodsList:[],
            };
         },
   methods: {
    goDetial(item) {
        uni.navigateTo({ url: '/subpackg_1/goodsDetial/index?goodsId='+item.goods_id })
    }
   },
    computed:{
      width() {
      return 100 / this.column + "%";
    },
  imgHeight(){
    return this.column===2?'360rpx':'240rpx'
    }
    },
   watch: {
    goodsItem:{
      deep:true,
      handler(val){
       this.goodsList=val
      }
    }
   }
    }
</script>

<style lang="scss" scoped>
.goodsWrap {
  display: flex;
  flex-wrap: wrap;
 
  .goodsItem {
    text-align: center;
    padding-top: 20rpx;
 
    img{
        width: 90%;
    }
    .text,.price{
        padding-left: 20rpx;
        text-align: left;
        font-size: 28rpx;
       line-height:44rpx ;
    }
    .text{
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;				//溢出内容隐藏
	text-overflow: ellipsis;		//文本溢出部分用省略号表示
	display: -webkit-box;			//特别显示模式
	-webkit-line-clamp: 2;			//行数
	line-clamp: 2;					
	-webkit-box-orient: vertical;	
    }
    .price{
        color: red;
        font-size: 32rpx;
    }
  }
}
.singleGoodsItem{
 .goodsItem{
    height: 280rpx;
    display: flex;
      padding: 20rpx;
    justify-content: space-between;
      .content{
     width: 420rpx;
     padding: 20rpx 0 0;
       .title{
          font-size: 26rpx;
          line-height: 30rpx;
         height: 64rpx;
         text-overflow: -o-ellipsis-lastline;
	overflow: hidden;				//溢出内容隐藏
	text-overflow: ellipsis;		//文本溢出部分用省略号表示
	display: -webkit-box;			//特别显示模式
	-webkit-line-clamp: 2;			//行数
	line-clamp: 2;					
	-webkit-box-orient: vertical;	
        }
        .comment{
              margin-top: 10rpx;
            line-height: 32rpx;
            height: 32rpx;
            font-size: 24rpx;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .sell{
          color: #999999;
        height: 40rpx;
        line-height: 40rpx;
        font-size: 24rpx;
        }
          .price{
        color: red;
        font-size: 32rpx;
    }
       }
      img{  
     width:240rpx;
        height: 100%;
      }
   
 }
}
</style>